*{
   margin: 0;
   padding: 0;
}
ul li{
    list-style: none;
}
.px2rem(@name, @px){
    @{name}: @px / 28 * 1rem;
}
.header{
   .px2rem(height, 32);
   background:#00bcd4 ; 
   display: flex;
   align-items: center;
   .h-left{
      .px2rem(line-height, 32); 
      width: 8%;
      text-align: center;
      .px2rem(font-size, 16);
      color: #c8f1f6;
   }
   .h-center{
       flex: 1;
       text-align: center;
       height: 80%;
       border: 1px solid #00BCD4;
       background: #fff;
       border-radius: 5px;
       input{
           width: 85%;
           height: 100%;
           border: none;
           .px2rem(font-size, 8);
           color: #000;
         
       }
       input::placeholder{
           color:#d6d6d6;
       }
   }
   .h-right{
       .px2rem(line-height, 32);
       width: 12%;
       text-align: center;
       color: #fff;
   }
}
.img {
    width: 100%;
}
.clas{
    display: flex;
    flex-wrap:wrap;
    dl{
        width: 25%;
        text-align: center;
        .px2rem(margin-top, 8);
        dt{
            img{
               .px2rem(height, 45); 

            }
        }
        dd{
            .px2rem(margin-top, 8);
            .px2rem(font-size, 10);
        }
    }
}
.hot{
    .px2rem(line-height, 28);
    background: #eeeeee;
    .px2rem(font-size, 8);
    .px2rem(padding-left, 8);
    .px2rem(margin-top, 8);
}
.hots{
    dl{
     .px2rem(height, 71);
     border-bottom: 1px solid #ccc; 
     display: flex;
     align-items: center;
     dd{
       .px2rem(height, 63); 
       .px2rem(padding-left, 4);
       h1{
          .px2rem(font-size, 11);
          .px2rem(margin-top, 2);
       }
       p{
         .px2rem(line-height, 26);
         .px2rem(font-size, 9);
         color: #d8d8d8; 
         font-weight: bold; 
       } 
       span{
           display: block;
           .px2rem(width, 57);
           .px2rem(line-height, 17);
           background:#ff9300 ;
           color: #fff;
           text-align: center;
           .px2rem(font-size, 9);
           border-radius: 4px;
          
       } 
     }
     dt{
         .px2rem(padding-left, 4);
         .px2rem(padding-right, 4);
         img{
            .px2rem(height, 63); 
         }
     }
    }
   
}
.week{
   width: 100%;
   dl{
       dt{
           img{
               width: 100%;
           }
       }
       dd{
           .px2rem(padding-left, 4); 
         p{
           .px2rem(margin-top, 7);
           .px2rem(font-size, 10);  
         } 
         span{
          .px2rem(font-size, 9); 
          .px2rem(line-height, 22);
          color: #cccccc; 
         } 
       }
   }
   
}
.headers{
    .px2rem(height, 60);
    background: #00bcd4;
    display: flex;
    flex-wrap: wrap;
    .h-left{
      .px2rem(line-height, 30); 
      width: 20%; 
       .px2rem(font-size, 18);
       color: #fff;
    }
   h1{
       width: 60%;
        .px2rem(font-size, 10);
        .px2rem(line-height, 30);
        color: #fff;
        text-align: center;
   } 
   .bottom{
      .px2rem(height, 22);
      width: 90%;
      background: #fff; 
      border-radius: 5px;
      margin: 0 auto;
      input{
          width: 100%;
          height: 100%;
          border: none;
          text-align: center;
          border-radius: 5px;
      }
      input::placeholder {
          .px2rem(font-size, 9);
      }
   }
}
.hot1{
    margin-top: 0;
}
.localcity{
    .px2rem(height, 34);
    display: flex;
    align-items: center;
    span{
    display: block;
    .px2rem(width, 68);
    .px2rem(line-height, 14);
    border: 1px solid #ccc;
    text-align: center;
    .px2rem(margin-left, 8);
    border-radius: 3px;
    }
    
}
.cityHot{
    .px2rem(height, 61);
    display: flex;
    flex-wrap: wrap;
    span{
    display: block;
    .px2rem(width, 68);
    .px2rem(height, 14);
    border: 1px solid #ccc;
    text-align: center;
    .px2rem(margin-left, 8);
    .px2rem(margin-top, 8);
    border-radius: 3px;
    }
}
#cit{
 
    .cit-inner{

        .allCity{
       
        p{
         .px2rem(line-height, 27); 
         .px2rem(padding-left, 8);
         border-bottom: 1px solid #f1f1f1;  
        }
     }
    }   
}

.top{
    position: relative;
    .cont{
        position: absolute;
        .px2rem(bottom, 5); 
        .px2rem(right, 8);
        color: #fff;
    }
    .name{
        position: absolute;
        .px2rem(bottom, 5); 
        .px2rem(left, 8);
        color: #fff; 
        .px2rem(font-size, 10);  
    }
    .h-left{
       .px2rem(width, 25); 
       .px2rem(height, 25); 
       text-align: center;
       border-radius: 100%; 
       background: #000;
        position: absolute;
        .px2rem(top, 8); 
        .px2rem(left, 8); 
        span{
            color: #fff;
            opacity: .5;
            .px2rem(font-size, 15); 
            .px2rem(line-height, 25);
        }
    }
    img{
        width: 100%;
    }
}
html,.all{
    height: 100vh;
    background: #000;
    #img{
     width: 100%;
     margin-top: 50%;
     transform: translateY(-36%);   
    }
}
.bottom{
    p{
       .px2rem(line-height, 25); 
       border-bottom: 1px solid #ccc;
       .px2rem(padding-left, 5);
       span{
           color: #007AFF;
       }
    }
}
#p{
      .px2rem(padding-left, 10); 
    }
#pp{
   .px2rem(padding-left, 15);  
}
